<template>
  <div class="personal-likes-page">
    <div class="likes-header">
      <div class="likes-header-bg"></div>
      <div class="likes-header-content">
        <span class="likes-heart">
          <HeartFilled class="heart-animate" />
        </span>
        <span class="likes-title">我的点赞</span>
      </div>
    </div>
    <div class="likes-content">
      <div class="search-bar">
        <div class="color-search">
          <span>颜色：</span>
          <a-input
            type="color"
            v-model:value="color"
            style="width: 32px; height: 32px; border: none; background: transparent"
          />
          <a-checkbox v-model:checked="enableColor"> 请选择颜色 </a-checkbox>
        </div>
        <a-input-search
          v-model:value="keyword"
          placeholder="输入关键词搜索图片..."
          style="width: 260px; margin-left: 16px"
          @search="handleSearch"
        />
        <a-button type="primary" style="margin-left: 16px" @click="handleSearch">应用筛选</a-button>
        <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
        <div class="batch-controls">
          <a-button v-if="!batchMode" @click="batchMode = true" type="default"> 批量操作 </a-button>
          <template v-else>
            <a-button
              type="primary"
              danger
              :disabled="!selectedIds.length"
              @click="handleBatchCancel"
            >
              批量取消点赞
            </a-button>
            <a-button @click="toggleSelectAllOnPage" style="margin-left: 8px">
              {{
                selectedIds.length === imageList.length && imageList.length > 0
                  ? '取消全选'
                  : '全选本页'
              }}
            </a-button>
            <span class="selected-count">已选 {{ selectedIds.length }} 项</span>
            <a-button @click="batchMode = false">退出批量</a-button>
          </template>
        </div>
      </div>
      <div class="masonry-wrapper">
        <div class="grid-view-7">
          <div v-for="item in imageList" :key="item.id" class="grid-item-7">
            <div
              class="image-card fancy-card heart-card"
              :class="{ selected: batchMode && isSelected(item.id) }"
              @click="batchMode ? toggleSelect(item.id) : handleImageClick(item)"
            >
              <div class="image-wrapper fancy-img-wrapper">
                <img
                  :src="IMAGE_PREFIX + (item.thumbnailUrl || item.url)"
                  :alt="item.introduction || '暂无描述'"
                  class="image fancy-img"
                  @error="e => (e.target.style.display = 'none')"
                  @load="e => e.target.classList.add('loaded')"
                />
                <div class="image-overlay fancy-overlay heart-overlay">
                  <div class="overlay-content fancy-overlay-content">
                    <HeartFilled class="fancy-heart" />
                  </div>
                </div>
              </div>
              <div class="image-info fancy-info">
                <div class="image-name fancy-name">{{ item.name }}</div>
                <div class="image-meta fancy-meta">
                  <span class="category fancy-category">{{ item.category }}</span>
                  <span class="size fancy-size"
                    >{{ (Number(item.picSize) / 1024).toFixed(2) }} KB</span
                  >
                </div>
                <div class="fancy-divider"></div>
                <div class="image-action-bar fancy-action-bar">
                  <span class="icon-btn fancy-heart-count">
                    <HeartFilled style="color: #7ed6a7" />
                    {{ formatCount(item.likeCount) }}
                  </span>
                  <a-tooltip v-if="!batchMode" title="取消点赞">
                    <span class="unlike-btn" @click.stop="handleCancelLike(item.id)">取消点赞</span>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a-empty v-if="!loading && imageList.length === 0" description="暂无点赞图片" />
        <a-spin v-if="loading" style="margin-top: 48px" />
      </div>
      <div class="pagination-bar">
        <a-pagination
          v-model:current="pageNo"
          :total="total"
          :pageSize="pageSize"
          showSizeChanger
          showQuickJumper
          :showTotal="t => `共 ${t} 张图片`"
          @change="handlePageChange"
        />
      </div>
    </div>
    <!-- 预览弹窗 -->
    <a-modal
      v-model:visible="previewVisible"
      :footer="null"
      width="1200px"
      :style="{
        maxWidth: '90vw',
        height: '80vh',
        top: '10vh',
      }"
      @cancel="previewVisible = false"
      wrapClassName="image-preview-modal"
    >
      <div class="image-detail" v-if="previewImage">
        <div class="detail-content">
          <!-- 左侧图片展示 -->
          <div class="detail-image">
            <img
              :src="IMAGE_PREFIX + (previewImage.thumbnailUrl || previewImage.url)"
              :alt="previewImage.name"
            />
          </div>

          <!-- 右侧信息展示 -->
          <div class="detail-info">
            <h3 class="preview-title">图片信息</h3>
            <div class="info-item">
              <span class="info-label">文件名：</span>
              <span class="info-value">{{ previewImage.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">描述：</span>
              <span class="info-value" :class="{ 'empty-text': !previewImage.introduction }">
                {{ previewImage.introduction || '暂无描述' }}
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">分类：</span>
              <a-tag v-if="previewImage.category" class="info-tag">{{ previewImage.category }}</a-tag>
              <span v-else class="empty-text">未分类</span>
            </div>
            <div class="info-item">
              <span class="info-label">标签：</span>
              <div class="info-value">
                <template v-if="previewImage.tagsList && previewImage.tagsList.length">
                  <div class="tags-list">
                    <template v-for="(tag, index) in previewImage.tagsList" :key="tag">
                      <template v-if="index < 4">
                        <a-tag class="info-tag">{{ tag }}</a-tag>
                      </template>
                    </template>
                    <a-tooltip
                      v-if="previewImage.tagsList.length > 4"
                      :title="previewImage.tagsList.slice(4).join(', ')"
                    >
                      <a-tag class="info-tag"> +{{ previewImage.tagsList.length - 4 }} </a-tag>
                    </a-tooltip>
                  </div>
                </template>
                <span v-else class="empty-text">暂无标签</span>
              </div>
            </div>
            <div class="info-item">
              <span class="info-label">大小：</span>
              <span class="info-value">{{ (Number(previewImage.picSize) / 1024).toFixed(2) }} KB</span>
            </div>
            <div class="info-item">
              <span class="info-label">分辨率：</span>
              <span class="info-value">{{ previewImage.picWidth }} × {{ previewImage.picHeight }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">格式：</span>
              <span class="info-value">{{ previewImage.picFormat?.toUpperCase() || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">点赞数：</span>
              <span class="info-value">{{ formatCount(previewImage.likeCount) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间：</span>
              <span class="info-value" :class="{ 'empty-text': !previewImage.createTime }">
                {{
                  previewImage.createTime ? new Date(previewImage.createTime).toLocaleString() : '未知'
                }}
              </span>
            </div>
            <div class="action-buttons">
              <a-space>
                <a-button type="primary" danger @click="handleCancelLike(previewImage.id)">
                  <template #icon><HeartFilled /></template>
                  取消点赞
                </a-button>
              </a-space>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { HeartFilled } from '@ant-design/icons-vue'
  import {
    getLikePictureListUsingGet,
  } from '@/api/tupianguanlijiekou'
  import { message } from 'ant-design-vue'
  import { IMAGE_PREFIX } from '@/config/constants'

  const color = ref('')
  const enableColor = ref(false)
  const keyword = ref('')
  const pageNo = ref(1)
  const pageSize = ref(28)
  const total = ref(0)
  const imageList = ref<any[]>([])
  const loading = ref(false)

  const previewVisible = ref(false)
  const previewImage = ref<any>(null)
  const selectedIds = ref<string[]>([])
  const batchMode = ref(false)

  // 数字格式化函数，仿照首页
  const formatCount = (num: number | undefined) => {
    if (!num) return 0
    if (num < 10000) return num
    return (num / 10000).toFixed(1).replace(/\.0$/, '') + 'w'
  }

  const fetchList = async () => {
    loading.value = true
    try {
      const params: any = {
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        searchText: keyword.value || undefined,
      }
      if (enableColor.value) params.color = color.value
      const res = await getLikePictureListUsingGet(params)
      if (res.data.code === 200 && res.data.data) {
        imageList.value = res.data.data.records || []
        total.value = res.data.data.total || 0
      } else {
        message.error(res.data.message || '获取点赞图片失败')
      }
    } catch {
      message.error('获取点赞图片失败')
    } finally {
      loading.value = false
    }
  }

  const handleSearch = () => {
    pageNo.value = 1
    fetchList()
  }

  const handleReset = () => {
    color.value = ''
    keyword.value = ''
    pageNo.value = 1
    fetchList()
  }

  const handlePageChange = (p: number, s: number) => {
    pageNo.value = p
    pageSize.value = s
    fetchList()
  }

  const handleImageClick = (item: any) => {
    if (batchMode.value) return
    previewImage.value = item
    previewVisible.value = true
  }

  const handleCancelLike = async (id: string) => {
    await cancelLikePictureUsingPost1(id)
    message.success('已取消点赞')
    previewVisible.value = false
    fetchList()
  }
  const handleBatchCancel = async () => {
    if (!selectedIds.value.length) return
    await cancelLikePictureUsingPost1(selectedIds.value.join(','))
    message.success('批量取消点赞成功')
    selectedIds.value = []
    batchMode.value = false
    fetchList()
  }
  const toggleSelect = (id: string) => {
    if (selectedIds.value.includes(id)) {
      selectedIds.value = selectedIds.value.filter(i => i !== id)
    } else {
      selectedIds.value.push(id)
    }
  }
  const isSelected = (id: string) => selectedIds.value.includes(id)

  const toggleSelectAllOnPage = () => {
    if (selectedIds.value.length === imageList.value.length && imageList.value.length > 0) {
      selectedIds.value = []
    } else {
      selectedIds.value = imageList.value.map(item => item.id)
    }
  }

  onMounted(() => {
    fetchList()
  })
</script>

<style scoped>
  .personal-likes-page {
    background: var(--theme-background);
    transition: all 0.3s ease;
  }
  .likes-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 90px;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 12px;
  }
  .likes-header-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(90deg, #fbc2eb 0%, #7ed6a7 100%);
    opacity: 0.92;
    z-index: 0;
    border-radius: 0 0 32px 32px;
    pointer-events: none;
  }
  .likes-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 36px;
    height: 90px;
  }
  .likes-heart {
    font-size: 44px;
    margin-right: 18px;
    display: flex;
    align-items: center;
    animation: heartBeat 1.6s infinite;
  }
  .heart-animate {
    color: #7ed6a7;
    filter: drop-shadow(0 2px 8px #b2f7ef);
    animation: pulse 1.2s infinite;
  }
  .likes-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-shadow: 0 2px 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }
  .likes-content {
    padding: 0 0 24px 0;
    background: var(--theme-background);
    transition: background 0.3s ease;
  }
  .search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 24px 0;
    padding: 0 24px;
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 16px 24px;
    border: 1px solid var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }
  .color-search {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }
  .masonry-wrapper {
    min-height: 320px;
    padding: 0 24px;
    background: var(--theme-background);
    transition: background 0.3s ease;
  }
  .grid-view-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 28px 22px;
    justify-content: center;
    align-items: stretch;
  }
  .grid-item-7 {
    min-width: 0;
    display: flex;
  }
  @media (max-width: 1600px) {
    .grid-view-7 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (max-width: 900px) {
    .grid-view-7 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 600px) {
    .grid-view-7 {
      grid-template-columns: 1fr;
    }
  }
  .fancy-card {
    background: var(--theme-surface);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 32px var(--theme-shadow);
    transition: all 0.3s ease;
    border: 2.5px solid var(--theme-border);
    position: relative;
    cursor: pointer;
    will-change: transform;
    animation: fancyFadeIn 0.7s;
  }
  .fancy-card:hover {
    transform: translateY(-10px) scale(1.045) rotateZ(-1deg);
    box-shadow: 0 12px 64px 0 var(--theme-shadow);
    border-color: var(--theme-primary);
  }
  .fancy-card.selected {
    border: 3px solid var(--theme-primary);
    box-shadow: 0 8px 32px var(--theme-shadow);
    transform: translateY(-8px) scale(1.02);
  }
  .fancy-card.selected::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 24px;
    z-index: -1;
    opacity: 0.3;
  }
  .fancy-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-radius: 18px 18px 0 0;
    transition: all 0.3s ease;
  }
  .fancy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.08);
    border-radius: 18px 18px 0 0;
    transition: all 0.7s cubic-bezier(0.4, 2, 0.3, 1);
  }
  .fancy-img.loaded {
    opacity: 1;
    transform: scale(1);
  }
  .fancy-card:hover .fancy-img {
    transform: scale(1.06);
    filter: brightness(1.08) saturate(1.1);
  }
  .heart-overlay {
    background: linear-gradient(
      120deg,
      rgba(var(--theme-primary-rgb), 0.22) 0%,
      rgba(var(--theme-secondary-rgb), 0.28) 100%
    );
    transition: all 0.3s ease;
  }
  .fancy-overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fancy-heart {
    font-size: 34px;
    color: var(--theme-primary);
    filter: drop-shadow(0 2px 8px var(--theme-shadow));
    animation: heartBeat 1.2s infinite;
    transition: all 0.3s ease;
  }
  .fancy-card:hover .fancy-heart {
    animation: heartSpin 0.7s;
    color: var(--theme-secondary);
  }
  @keyframes heartSpin {
    0% {
      transform: rotate(0deg) scale(1.1);
    }
    100% {
      transform: rotate(360deg) scale(1.1);
    }
  }
  .fancy-info {
    padding: 18px 18px 12px 18px;
    position: relative;
    background: var(--theme-surface);
    transition: background 0.3s ease;
  }
  .fancy-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
  }
  .fancy-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--theme-textSecondary);
    margin-bottom: 8px;
    gap: 10px;
    transition: color 0.3s ease;
  }
  .fancy-category {
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: var(--theme-surface);
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    margin-right: 8px;
    box-shadow: 0 1px 4px var(--theme-shadow);
    transition: all 0.3s ease;
  }
  .fancy-size {
    color: var(--theme-primary);
    font-size: 12px;
    transition: color 0.3s ease;
  }
  .fancy-divider {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-radius: 2px;
    margin: 10px 0 12px 0;
    opacity: 0.32;
    box-shadow: 0 1px 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }
  .fancy-action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--theme-surface);
    transition: background 0.3s ease;
  }
  .fancy-heart-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-primary);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .fancy-heart-count .anticon {
    color: var(--theme-primary);
    transition: color 0.3s ease;
  }
  .unlike-btn {
    background: var(--theme-error);
    color: var(--theme-surface);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--theme-error);
  }
  .unlike-btn:hover {
    background: var(--theme-surface);
    color: var(--theme-error);
    border-color: var(--theme-error);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }
  @keyframes fancyHeartPop {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.18) rotate(-10deg);
    }
  }
  @keyframes fancyFadeIn {
    from {
      opacity: 0;
      transform: translateY(30px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .pagination-bar {
    margin: 32px 0 0 0;
    display: flex;
    justify-content: center;
  }
  @keyframes heartBeat {
    0%,
    100% {
      transform: scale(1);
    }
    10% {
      transform: scale(1.08);
    }
    20% {
      transform: scale(0.95);
    }
    30% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(0.97);
    }
    70% {
      transform: scale(1.04);
    }
    90% {
      transform: scale(0.98);
    }
  }
  @keyframes pulse {
    0%,
    100% {
      filter: drop-shadow(0 2px 8px #b2f7ef);
    }
    50% {
      filter: drop-shadow(0 6px 24px #b2f7ef);
    }
  }
  .card-actions {
    position: absolute;
    right: 16px;
    top: 14px;
    z-index: 2;
    display: flex;
    gap: 10px;
  }
  .batch-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .selected-count {
    color: var(--theme-textSecondary);
    font-size: 13px;
    margin-left: 8px;
    transition: color 0.3s ease;
  }

  /* 图片预览弹窗样式 */
  :deep(.image-preview-modal) {
    .ant-modal {
      height: 80vh;
      padding-bottom: 0;
    }

    .ant-modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      overflow: hidden;
      background: var(--theme-surface);
      color: var(--theme-text);
      transition: all 0.3s ease;
    }

    .ant-modal-body {
      flex: 1;
      overflow: auto;
      padding: 24px;
      background: var(--theme-surface);
      color: var(--theme-text);
      transition: all 0.3s ease;
    }
  }

  .image-detail {
    height: 100%;
  }

  .detail-content {
    display: flex;
    gap: 32px;
    height: 100%;
  }

  .detail-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-background);
    border-radius: 12px;
    overflow: hidden;
    max-height: calc(80vh - 100px);
    box-shadow: 0 4px 12px var(--theme-shadow);
    transition: all 0.3s ease;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
  }

  .detail-info {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 20px;
    background: var(--theme-background);
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  /* 预览标题样式 */
  .preview-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 12px;
    transition: color 0.3s ease;
  }

  /* 深色主题下的标题 */
  [data-theme="dark"] .preview-title {
    color: #ff00ff !important; /* 洋红色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(255, 0, 255, 0.5) !important;
  }

  /* 浅色主题下的标题 */
  [data-theme="light"] .preview-title {
    color: #1890ff !important; /* 蓝色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--theme-border);
    transition: border-color 0.3s ease;

    &:last-child {
      border-bottom: none;
    }
  }

  /* 信息标签样式 */
  .info-label {
    width: 80px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--theme-textSecondary);
    transition: all 0.3s ease;
  }

  /* 深色主题下的标签 */
  [data-theme="dark"] .info-label {
    color: #00ffff !important; /* 青色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(0, 255, 255, 0.5) !important;
  }

  /* 浅色主题下的标签 */
  [data-theme="light"] .info-label {
    color: #666666 !important; /* 深灰色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  /* 信息值样式 */
  .info-value {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  /* 深色主题下的值 */
  [data-theme="dark"] .info-value {
    color: #ffff00 !important; /* 黄色，在深色主题下醒目 */
    text-shadow: 0 1px 3px rgba(255, 255, 0, 0.5) !important;
  }

  /* 浅色主题下的值 */
  [data-theme="light"] .info-value {
    color: #333333 !important; /* 深黑色，在浅色主题下清晰 */
    text-shadow: none !important;
  }

  .tags-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .info-tag {
    margin: 0;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: var(--theme-surface);
    transition: all 0.3s ease;
    font-weight: 500;

    &:hover {
      background: var(--theme-secondary);
      border-color: var(--theme-secondary);
      color: var(--theme-surface);
    }
  }

  /* 深色主题下的标签优化 */
  [data-theme="dark"] .info-tag {
    background: #1890ff;
    border-color: #1890ff;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.3);
  }

  [data-theme="dark"] .info-tag:hover {
    background: #40a9ff;
    border-color: #40a9ff;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.4);
  }

  .empty-text {
    color: var(--theme-textSecondary);
    font-style: italic;
    transition: color 0.3s ease;
  }

  .action-buttons {
    margin-top: 24px;
    text-align: center;
  }

  .action-buttons .ant-btn {
    min-width: 120px;
  }
  .fancy-preview-modal .ant-modal-content {
    background: var(--theme-surface);
    box-shadow: 0 8px 48px var(--theme-shadow);
    overflow: visible;
    border-radius: 18px;
    transition: all 0.3s ease;
  }
  .preview-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 36px;
    align-items: flex-start;
    background: var(--theme-surface);
    border-radius: 18px;
    box-shadow: 0 8px 48px var(--theme-shadow);
    padding: 38px 38px 32px 38px;
    transition: all 0.3s ease;
  }
  .preview-image-area {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .preview-img {
    max-width: 480px;
    max-height: 520px;
    border-radius: 16px;
    box-shadow: 0 4px 32px var(--theme-shadow);
    background: var(--theme-surface);
    transition: all 0.3s ease;
  }
  .preview-info-area {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--theme-surface);
    transition: background 0.3s ease;
  }
  .preview-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 12px;
    transition: color 0.3s ease;
  }
  .preview-meta {
    font-size: 15px;
    color: var(--theme-text);
    line-height: 2.1;
    transition: color 0.3s ease;
  }

  /* 修复搜索框和按钮样式 */
  :deep(.ant-input-search) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-search:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input-search:focus-within) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
  }

  :deep(.ant-input) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-btn) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-primary:hover) {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
  }

  :deep(.ant-checkbox-wrapper) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
  }

  /* 修复空状态和加载状态 */
  :deep(.ant-empty) {
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  :deep(.ant-spin) {
    color: var(--theme-primary);
    transition: color 0.3s ease;
  }

  /* 修复批量操作区域 */
  .batch-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .selected-count {
    color: var(--theme-textSecondary);
    font-size: 13px;
    margin-left: 8px;
    transition: color 0.3s ease;
  }
</style>
